<template>
    <focusbox>
        <div class="teleplay">  
            <div class="btmCenter">
                <div v-focusable :style="{width:item.id == 0 ? '60%' : item.id==1?'38%': '22%' }" @onFocus="focus('li' + item.id, item.id)" :id="('li' + item.id)" v-for="(item, index) in dataList" :key="index" class="teleplayModel">{{index}}</div>
            </div>
        </div>
    </focusbox>
</template>

<script setup lang='ts'>
import { ref, onMounted, nextTick } from 'vue';
import useCurrentInstance from '@/utils/useCurrentInstance';
const { proxy } = useCurrentInstance()

const dataList = ref([{id:0},{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8},{id:9},{id:10},{id:11}])

const focus = (a:string,num:number) => {
    let target = <HTMLImageElement>document.getElementById(a);
    let parent = <HTMLImageElement>document.getElementsByClassName('teleplay')[0];
    if(num > 0 && num < 5){
        parent.scrollTop = 0
    }else{
        parent.scrollTop = target!.offsetTop - parent.offsetTop;
    }
}
</script>

<style lang='scss' scoped>
.teleplay{
    width: 100%;
    height: 85vh;
    overflow: hidden;
    .btmCenter{
        height: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .teleplayModel{
            width: calc(99%/3);
            height: 500px;
            margin-bottom: 20px;
            border-radius: 10px;
            border: 1px solid rgb(37, 37, 37);
        }
        // #li0{
        //     width: 60%;
        // }
        // #li1{
        //     width: 38%;
        // }
    }
    // div:nth-child(1){
    //     width: 60%;
    // }
    // div:nth-child(2){
    //     width: 38%;
    // }
}
</style>